<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <style>
      #meter_info{
        width: 25%;
        height: 80vh;
        float:left;
        margin-left: 1%;
      }
      #usage_info{
        width: 50%;
        height: 80vh;
        float:left;
        margin-left: 2%;
      }
      #msg_info{
        width: 19%;
        height: 80vh;
        float:left;
        margin-left: 2%;
      }
      .ico_w{
        border-radius: 50% !important;
      }
      .ico_w i{
        top: 9px;
        position: relative;
      }
      .progress{
        height: 15px !important;
        width: 120px;
        border-radius: 15px !important;
      }
      .outer-container,.content {
        width: 100%;
        height: 430px;
      }
      .outer-container {
        position: relative;
        overflow: hidden;
      }
      .inner-container {
        position: absolute;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      /* for Chrome */
      .inner-container::-webkit-scrollbar {
        display: none;
      }

    </style>
  </head>
  <body>
    <div class="page">
      <jsp:include page="header.jsp"></jsp:include>
      <div class="page-content d-flex align-items-stretch">
        <jsp:include page="left.jsp"></jsp:include>
        <div class="content-inner"  style="background-color: white">
          <!-- Page Header-->
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">首页总览</h2>
            </div>
          </header>
          <div class="content-box" >
            <!-- Dashboard Counts Section-->
            <section class="dashboard-counts no-padding-bottom">
              <div class="container-fluid">
                <div class="row bg-white has-shadow">
                  <div style="position: absolute;top: 119px;"><h5>电表状态</h5> </div>
                  <!-- Item -->
                  <div class="col-xl-3 col-sm-6">
                    <div class="item d-flex align-items-center">
                      <div class="icon bg-violet ico_w"><i class="icon-user"></i></div>
                      <div class="title"><span>未开户</span>
                        <div class="progress">
                          <div role="progressbar" style="width: 25%; height: 15px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
                        </div>
                      </div>
                      <div class="number"><strong>25</strong></div>
                    </div>
                  </div>
                  <!-- Item -->
                  <div class="col-xl-3 col-sm-6">
                    <div class="item d-flex align-items-center">
                      <div class="icon bg-red ico_w"><i class="icon-padnote"></i></div>
                      <div class="title"><span>断线</span>
                        <div class="progress">
                          <div role="progressbar" style="width: 70%; height: 15px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
                        </div>
                      </div>
                      <div class="number"><strong>70</strong></div>
                    </div>
                  </div>
                  <!-- Item -->
                  <div class="col-xl-3 col-sm-6">
                    <div class="item d-flex align-items-center">
                      <div class="icon bg-green ico_w"><i class="icon-bill"></i></div>
                      <div class="title"><span>在线</span>
                        <div class="progress">
                          <div role="progressbar" style="width: 40%; height: 15px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
                        </div>
                      </div>
                      <div class="number"><strong>40</strong></div>
                    </div>
                  </div>
                  <!-- Item -->
                  <div class="col-xl-3 col-sm-6">
                    <div class="item d-flex align-items-center">
                      <div class="icon bg-orange ico_w"><i class="icon-check"></i></div>
                      <div class="title"><span>欠费</span>
                        <div class="progress">
                          <div role="progressbar" style="width: 50%; height: 15px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-orange"></div>
                        </div>
                      </div>
                      <div class="number"><strong>50</strong></div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <!-- Dashboard Header Section    -->
            <section class="dashboard-header">
              <div class="container-fluid">
                <div class="row">
                  <!-- Statistics -->
                  <div class="statistics col-lg-3 col-12">
                    <div class="statistic d-flex align-items-center bg-white has-shadow" style="height: 100px">
                      <div class="icon bg-red ico_w"><i class="fa fa-line-chart"></i></div>
                      <div class="text"><strong style="font-size: 16px;">昨日用电</strong><br><small></small></div>
                      <div class="text" style="position: relative;left: 80px"><strong>234</strong>&nbsp;&nbsp;<small>KWh</small></div>
                    </div>
                    <div class="statistic d-flex align-items-center bg-white has-shadow" style="height: 100px">
                      <div class="icon bg-green ico_w"><i class="fa fa-line-chart"></i></div>
                      <div class="text"><strong style="font-size: 16px;">今日用电</strong><br><small></small></div>
                      <div class="text" style="position: relative;left: 80px"><strong>184</strong>&nbsp;&nbsp;<small>KWh</small></div>
                    </div>
                    <div class="statistic d-flex align-items-center bg-white has-shadow" style="height: 100px">
                      <div class="icon bg-orange ico_w"><i class="fa fa-line-chart"></i></div>
                      <div class="text"><strong style="font-size: 16px;">同比增长</strong><br><small></small></div>
                      <div class="text" style="position: relative;left: 80px"><strong>20</strong>&nbsp;&nbsp;<small>%</small></div>
                    </div>
                    <div class="statistic d-flex align-items-center bg-white has-shadow" style="height: 100px">
                      <div class="icon bg-violet ico_w"><i class="fa fa-line-chart"></i></div>
                      <div class="text"><strong style="font-size: 16px;">最高负荷</strong><br><small></small></div>
                      <div class="text" style="position: relative;left: 80px"><strong>20</strong>&nbsp;&nbsp;<small>KW</small></div>
                    </div>
                  </div>
                  <!-- Line Chart            -->
                  <div class="chart col-lg-6 col-12" style="height: 450px">
                    <div style="width:100%;height: 430px">
                      <canvas id="canvas" style="position: relative;top: 45px"></canvas>
                    </div>
                  </div>
                  <div class="chart col-lg-3 col-12" style="height: 450px;">
                      <div class="recent-updates card">
                        <div class="card-header">
                          <h3 class="h4">消息通知</h3>
                        </div>
                        <div class="outer-container">
                          <div class="inner-container">
                            <div class="content">
                        <div class="card-body no-padding">
                          <!-- Item-->
                          <div class="item d-flex justify-content-between">
                            <div class="info d-flex">
                              <div class="icon"><i class="icon-rss-feed"></i></div>
                              <div class="title">
                                <h5>欠费通知</h5>
                                <p>www商户账户已欠费，当前余额-2元</p>
                              </div>
                            </div>
                            <div class="date text-right"><strong style="font-size: 14px">10:40</strong><span>2020-03-16</span></div>
                          </div>
                          <!-- Item-->
                          <div class="item d-flex justify-content-between">
                            <div class="info d-flex">
                              <div class="icon"><i class="icon-rss-feed"></i></div>
                              <div class="title">
                                <h5>充值信息</h5>
                                <p>hhh商户通过支付宝给账户充值100元</p>
                              </div>
                            </div>
                            <div class="date text-right"><strong style="font-size: 14px">09:20</strong><span>2020-03-12</span></div>
                          </div>
                          <!-- Item        -->
                          <div class="item d-flex justify-content-between">
                            <div class="info d-flex">
                              <div class="icon"><i class="icon-rss-feed"></i></div>
                              <div class="title">
                                <h5>余额不足提示</h5>
                                <p>FFF商户余额低于10元，已发送充值提示通知</p>
                              </div>
                            </div>
                            <div class="date text-right"><strong style="font-size: 14px">08:00</strong><span>2020-03-12</span></div>
                          </div>
                          <!-- Item-->
                          <div class="item d-flex justify-content-between">
                            <div class="info d-flex">
                              <div class="icon"><i class="icon-rss-feed"></i></div>
                              <div class="title">
                                <h5>结算通知</h5>
                                <p>LLL商户完成账户结算</p>
                              </div>
                            </div>
                            <div class="date text-right"><strong style="font-size: 14px">16:20</strong><span>2020-03-11</span></div>
                          </div>
                          <!-- Item-->
                          <div class="item d-flex justify-content-between">
                            <div class="info d-flex">
                              <div class="icon"><i class="icon-rss-feed"></i></div>
                              <div class="title">
                                <h5>充值提示</h5>
                                <p>WWW商户通过微信给账户充值1000元</p>
                              </div>
                            </div>
                            <div class="date text-right"><strong style="font-size: 14px">11:11</strong><span>2020-03-11</span></div>
                          </div>
                        </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </section>
          </div>
          <!-- Page Footer-->
          <jsp:include page="footer.jsp"></jsp:include>
        </div>

  </body>
<script>
  $("#home-menu").addClass('active');
</script>
  <script src="${pageContext.request.contextPath}/js/ele.js"></script>
  <script>
    layui.use('element', function(){
      var $ = layui.jquery
              ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
  </script>
</html>